<template>
  <view :style="colorStyle">
    <block v-if="!isLoading">
      <!-- #ifdef MP-WEIXIN -->
      <view class="" style="height: 100rpx"> </view>
      <!-- #endif -->
      <x-skeleton type="banner" :loading="true">
        <view>我是轮播图</view>
      </x-skeleton>
      <x-skeleton
        type="list"
        v-for="(item, index, key) in 100"
        :key="'waterfall' + index"
        :loading="true"
      >
        <view>我是轮播图</view>
      </x-skeleton>
    </block>
    <view v-if="isLoading">
      <view class="bg">
        <image src="@/static/img48.png" mode="widthFix"></image>
      </view>
      <!-- #ifdef H5 -->
      <view class="" style="height: 100rpx"> </view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <view class="" :style="navTitleModuleStyle"> </view>
      <!-- #endif -->
      <view class="infobox1 flex aitems">
        <image
          :src="info.avatar ? info.avatar : require('@/static/headimg.png')"
          class="block2"
          mode=""
        ></image>
        <view class="block1">
          <view class="info1 cfff f36 fontWeight">
            {{ info.nickName ? info.nickName : "微信用户" }}
          </view>
          <view
            class="info2 flex aitems"
            v-if="!info.mobile"
            @click="gourl(`/pages/reg/reg`)"
          >
            <view class="tip1 f28 cfff"> 点击登录 </view>
            <image src="@/static/img50.png" mode=""></image>
          </view>
          <view class="info3 flex aitems themeColor f24">
            <!-- <view
            class="tip1"
            v-for="(item, index, key) in info.userTagList"
            :key="key"
          >
            {{ item.name }}
          </view> -->
            <view class="tip1" @click.stop="gourl(`/pages/user/level`)">
              {{ level[info.level] }}
            </view>
          </view>
        </view>
        <u-icon
          name="setting-fill"
          class="setting"
          :size="30"
          color="#fff"
          @click="gourl('/pages/user/setting')"
        ></u-icon>
      </view>
      <view class="infobox2 flex aitems sa">
        <view
          class="block1"
          @click.stop="gourl(`/pages/user/integralList?m=${info.integral}`)"
        >
          <view class="info1 c1F1F1F f40 fontWeight">
            {{ info.integral }}
          </view>
          <view class="info2 c858585 f28"> 积分 </view>
        </view>
        <view class="block1" @click.stop="gourl(`/pages/coupon/myCoupon`)">
          <view class="info1 c1F1F1F f40 fontWeight">
            {{ totalInfo.couponNum }}
          </view>
          <view class="info2 c858585 f28"> 优惠券 </view>
        </view>
        <view class="block1" @click.stop="gourl(`/pages/user/collection`)">
          <view class="info1 c1F1F1F f40 fontWeight">
            {{ totalInfo.favoriteNum }}
          </view>
          <view class="info2 c858585 f28"> 收藏 </view>
        </view>
        <view class="block1" @click.stop="gourl(`/pages/user/footprint`)">
          <view class="info1 c1F1F1F f40 fontWeight">
            {{ totalInfo.footprintNum }}
          </view>
          <view class="info2 c858585 f28"> 足迹 </view>
        </view>
      </view>
      <view class="infobox3">
        <view
          class="block1 flex aitems between"
          @click="goOrder(`/pages/order/list?t=0`)"
        >
          <view class="info1 c1F1F1F f32 fontWeight"> 我的订单 </view>
          <view class="info2 flex aitems c858585 f24">
            全部订单
            <image src="@/static/img18.png" mode=""></image>
          </view>
        </view>
        <view class="block2 flex aitems between">
          <view class="info1" @click="goOrder(`/pages/order/list?t=1`)">
            <view class="img">
              <image src="@/static/img51.png" mode=""></image>
              <view class="yuan"> </view>
            </view>
            <view class="tip1 c1F1F1F f24"> 待付款 </view>
            <view
              class="nums cfff f24 flex aitems jcenter"
              v-if="countInfo.count1 > 0"
            >
              {{ countInfo.count1 }}
            </view>
          </view>
          <view class="info1" @click="goOrder(`/pages/order/list?t=2`)">
            <view class="img">
              <image src="@/static/img52.png" mode=""></image>
              <view class="yuan"> </view>
            </view>
            <view class="tip1 c1F1F1F f24"> 待发货 </view>
            <view
              class="nums cfff f24 flex aitems jcenter"
              v-if="countInfo.count2 > 0"
            >
              {{ countInfo.count2 }}
            </view>
          </view>
          <view class="info1" @click="goOrder(`/pages/order/list?t=3`)">
            <view class="img">
              <image src="@/static/img53.png" mode=""></image>
              <view class="yuan"> </view>
            </view>
            <view class="tip1 c1F1F1F f24"> 待收货 </view>
            <view
              class="nums cfff f24 flex aitems jcenter"
              v-if="countInfo.count3 > 0"
            >
              {{ countInfo.count3 }}
            </view>
          </view>
          <view class="info1" @click="goOrder(`/pages/order/list?t=4`)">
            <view class="img">
              <image src="@/static/img54.png" mode=""></image>
              <view class="yuan"> </view>
            </view>
            <view class="tip1 c1F1F1F f24"> 待评价 </view>
            <view
              class="nums cfff f24 flex aitems jcenter"
              v-if="countInfo.count4 > 0"
            >
              {{ countInfo.count4 }}
            </view>
          </view>
          <view class="info1" @click="goOrder(`/pages/refund/list`)">
            <view class="img">
              <image src="@/static/img55.png" mode=""></image>
              <view class="yuan"> </view>
            </view>
            <view class="tip1 c1F1F1F f24"> 售后订单 </view>
            <view
              class="nums cfff f24 flex aitems jcenter"
              v-if="countInfo.count5 > 0"
            >
              {{ countInfo.count5 }}
            </view>
          </view>
        </view>
      </view>

      <view class="infobox4">
        <view
          class="block1 flex aitems between"
          @click.stop="gourl(`/pages/coupon/myCoupon`)"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/2.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 我的优惠券 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>

        <view
          v-if="!info.isPlace"
          class="block1 flex aitems between"
          @click.stop="gourl(`/pages/distributor/applay`)"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/1.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 分销员申请 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>

        <!-- <view
          class="block1 flex aitems between"
          @click.stop="gourl(`/pages/distributor/goodsApplay`)"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/1.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 成为分销员商品 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view> -->

        <!-- <view
          class="block1 flex aitems between"
          @click.stop="goDistributor(`/pages/distributor/index`)"
          v-if="info.isPlace && info.mobile"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/10.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 我的推广 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view> -->

        <view
          class="block1 flex aitems between"
          v-if="info.isPlace"
          @click.stop="goDistributor(`/pages/distributor/index`)"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/1.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 分销员中心 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>

        <view
          class="block1 flex aitems between"
          @click.stop="gourl(`/pages/user/level`)"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/3.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 会员中心 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>

        <view
          class="block1 flex aitems between"
          @click.stop="gourl(`/pages/seller/applay`)"
          v-if="sellerapplayopen"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/4.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 商家入驻 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>

        <view
          class="block1 flex aitems between"
          @click.stop="gourl(`/pages/user/address`)"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/5.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 地址管理 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>

        <view
          class="block1 flex aitems between"
          @click.stop="gourl(`/pages/user/footprint`)"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/6.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 我的足迹 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>

        <view
          class="block1 flex aitems between"
          @click.stop="gourl(`/pages/user/collection`)"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/7.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 我的收藏 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>

        <view
          class="block1 flex aitems between"
          @click.stop="gourl(`/pages/user/help`)"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/8.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 帮助中心 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>

        <!-- #ifdef MP-WEIXIN -->
        <view class="block1 flex aitems between" style="position: relative">
          <button class="avatar-wrapper" open-type="contact"></button>
          <view class="info1 flex aitems">
            <image src="@/static/user/9.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 联系客服 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>
        <!-- #endif -->

        <!-- #ifdef H5 -->
        <view
          class="block1 flex aitems between"
          style="position: relative"
          @click="contactChange"
        >
          <view class="info1 flex aitems">
            <image src="@/static/user/9.png" mode=""></image>
            <view class="tip1 c1F1F1F f28"> 联系客服 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>
        <!-- #endif -->

        <!-- #ifdef H5 -->

        <view
          class="block1 flex aitems between"
          @click.stop="clearstore"
          v-if="Environment == 'H5'"
        >
          <view class="info1 flex aitems">
            <!-- <image src="@/static/user/10.png" mode=""></image> -->
            <view class="tip1 c1F1F1F f28"> 退出登录 </view>
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>

        <!-- #endif -->
      </view>

      <view class="" style="height: 100rpx"> </view>

      <custom-tab-bar :path="'/pages/user/user'" :list="[]"></custom-tab-bar
    ></view>
  </view>
</template>

<script>
import customTabBar from "@/components/CustomTabBar";
import {
  adornInfo,
  userinfo,
  couponUserPage,
  favoritePage,
  footprintPage,
  orderCount,
  updateParent,
  wechatUrlLink,
  levelList,
  paramConfig,
} from "@/servers/servers.js";
import { HTTP_STATUS, config } from "@/servers/config.js";
import colors from "@/mixins/color";
import {
  go,
  loading,
  msg,
  showModal,
  requestSubscribeMessage,
} from "../../utils/wxAPI";
import {
  getGloBalData,
  getStorage,
  getToken,
  removeStorage,
  setStorage,
} from "../../utils/storage";
import { getEnv } from "../../utils/env";
import { handleLoopCallBack } from "../../utils/util";
export default {
  mixins: [colors],
  components: {
    customTabBar,
  },
  data() {
    return {
      isLoading: false,
      configInfo: config,
      Environment: getEnv(),
      menuInfo: {},
      navTitleModuleStyle: "",
      info: {
        integral: 0,
      },
      totalInfo: {
        couponNum: 0,
        favoriteNum: 0,
        footprintNum: 0,
      },
      countInfo: {},
      options: {},
      level: [],
      sellerapplayopen: 0,
    };
  },
  onLoad(options) {
    this.options = options;
    uni.hideTabBar();
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `height:${
      this.menuInfo.height + this.menuInfo.top + 10
    }px`;
    // #endif

    // if (getToken()) {
    //   if (getEnv() == "WX_PUBLIC") {
    //     this.$jwx.wxopenlaunchweapp();
    //   }
    // }
  },
  async onShow() {
    if (getToken()) {
      await this.levelList();
      this.orderCount();
      this.userinfo();
      this.getTotal();
      this.paramConfig();
      if (this.options.uid) {
        updateParent({
          id: this.options.uid,
        });
      }
    } else {
      handleLoopCallBack(async () => {
        this.orderCount();
        this.userinfo();
        this.getTotal();
        this.paramConfig();
        if (this.options.uid) {
          updateParent({
            id: this.options.uid,
          });
        }
      });
      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  methods: {
    async paramConfig() {
      let { data } = await paramConfig({
        key: "seller.applay.open",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let num = data.data;
        this.sellerapplayopen = Number(num);
      }
    },
    async levelList() {
      let { data } = await levelList();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        let obj = {};
        for (let key of list) {
          obj[key.id] = key.name;
        }
        this.level = obj;
      }
    },
    async orderCount() {
      let { data } = await orderCount();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let total = data.data;
        this.countInfo = total;
      }
    },
    async getTotal() {
      let data1 = await couponUserPage({
        current: 1,
        size: 1,
        status: 0,
      });
      if (data1.data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.totalInfo.couponNum = data1.data.data.total;
      }

      let data2 = await favoritePage({
        current: 1,
        size: 1,
        status: 0,
      });
      if (data2.data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.totalInfo.favoriteNum = data2.data.data.total;
      }

      let data3 = await footprintPage({
        current: 1,
        size: 1,
        status: 0,
      });
      if (data2.data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.totalInfo.footprintNum = data3.data.data.total;
      }
    },
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
        setTimeout(() => {
          this.isLoading = true;
        }, 500);
      }
      uni.hideLoading();
    },
    gourl(url) {
      if (
        url == "/pages/seller/applay" ||
        url == "/pages/distributor/applay" ||
        url == "/pages/user/level"
      ) {
        // #ifdef MP-WEIXIN
        // if (!getGloBalData("is_authorization")) {
        //   return go(`/pages/reg/reg`);
        // }
        // // #endif
        // // #ifdef H5
        // if (getEnv() == "WX_PUBLIC") {
        //   if (!getStorage("is_authorization")) {
        //     return go(`/pages/reg/reg`);
        //   }
        // }
        // // #endif
        if (!this.info.mobile) {
          return go(`/pages/reg/reg`);
        }
      }
      go(url);
    },
    clearstore() {
      showModal({
        t2: "是否退出登录?",
      }).then(() => {
        // Object.keys(localStorage).forEach(function (key) {
        //   localStorage.removeItem(key);
        // });
        localStorage.removeItem("token");
        msg("退出成功");
        this.info = {};
        uni.reLaunch({
          url: "/pages/login/login",
        });
      });
    },
    async contactChange() {
      let { data } = await wechatUrlLink({
        query: "",
        url: "pages/kefu/kefu",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        window.location.href = info;
      }
    },
    goDistributor(url) {
      if (!this.info.mobile) {
        return go(`/pages/reg/reg`);
      }
      if (this.info.placeStatus == 0) {
        return showModal({
          t2: "该账户分销已被冻结,请联系客服",
          btn1show: false,
        });
      }
      // #ifdef MP-WEIXIN
      loading();
      requestSubscribeMessage({
        tmplIds: [
          "0K40Jiv1m4F54ptWntVvqo8kTYG5U470u-X8tnEVJbA",
          "5DaJQwHPSQ3TXD5KT03RHjpzz_rvTY_j-73pBVSF7jg",
        ],
      }).then(async (res) => {
        uni.hideLoading();
        go(url);
      });
      // #endif
      // #ifdef H5
      go(url);
      // #endif
    },
    goOrder(url) {
      // #ifdef MP-WEIXIN
      loading();
      requestSubscribeMessage({
        tmplIds: [
          "Ds9t0xqKmknQoZlozinu03ylvcSfh_FFHIC-NH2rXEc",
          "vlSi0JaXp-8ZuL1GRpBm8JRecROkW7tDRBvdcjA1eT4",
        ],
      }).then(async (res) => {
        uni.hideLoading();
        go(url);
      });
      // #endif
      // #ifdef H5
      go(url);
      // #endif
    },
  },
  onShareAppMessage: function (e) {
    return {
      title: "个人中心",
      path: `/pages/user/user?uid=${getGloBalData("userinfo").id}`,
    };
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.bg {
  position: absolute;
  height: 498rpx;
  width: 100%;
  background: linear-gradient(
    101deg,
    var(--view-op-ten6) 5.79%,
    var(--view-theme) 92.75%
  );

  image {
    width: 100%;
  }
}

.infobox1 {
  position: relative;
  z-index: 1;
  margin: 0 30rpx 0;

  .block2 {
    min-width: 120rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
  }

  .block1 {
    margin-left: 20rpx;
    width: calc(100% - 20rpx - 120rpx);

    .info1 {
    }

    .info2 {
      margin: 8rpx 0 0;

      .tip1 {
      }

      image {
        width: 36rpx;
        height: 36rpx;
        margin-left: 4rpx;
      }
    }

    .info3 {
      margin: 8rpx 0 0;

      .tip1 {
        background: #fff;
        border-radius: 12rpx;
        padding: 7rpx 12rpx;
        margin: 0 12rpx 0 0;
      }
    }
  }

  .setting {
    position: absolute;
    right: 0;
  }
}

.infobox2 {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 43rpx 30rpx 0;
  background: #fff;
  border-radius: 28rpx;
  padding: 36rpx 0;

  .block1 {
    .info2 {
      margin: 6rpx 0 0;
    }
  }
}

.infobox3 {
  position: relative;
  z-index: 1;
  padding: 36rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 24rpx 30rpx 0;

  .block1 {
    margin: 0 0 24rpx 0;

    .info1 {
    }

    .info2 {
      image {
        width: 32rpx;
        height: 32rpx;
        margin-left: 8rpx;
      }
    }
  }

  .block2 {
    .info1 {
      text-align: center;
      position: relative;

      .nums {
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        background: var(--view-theme);
        border-radius: 50%;
        top: -10rpx;
        right: -10rpx;
        z-index: 99;
      }

      .img {
        width: 64rpx;
        height: 64rpx;
        position: relative;
        margin: auto;
        z-index: 1;

        image {
          width: 64rpx;
          height: 64rpx;
        }

        .yuan {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 32rpx;
          height: 24rpx;
          border-radius: 12rpx;
          background: linear-gradient(
            101deg,
            rgba(138, 231, 214, 0) 5.79%,
            var(--view-theme) 92.75%
          );
        }
      }

      .tip1 {
        margin-top: 10rpx;
      }
    }
  }
}

.infobox4 {
  position: relative;
  z-index: 1;
  padding: 20rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 24rpx 30rpx 0;

  .block1 {
    padding: 20rpx 0;

    .info1 {
      image {
        width: 56rpx;
        height: 56rpx;
      }

      .tip1 {
        margin-left: 20rpx;
      }
    }

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }
}
</style>
